<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body{
            background-color: #666;
        }
        #app{
            text-align:center;
            align-content: center;
            margin: 200px auto;
          
            
        }

    </style>
</head>
<body>
    <div id="app">
        <img :src="imgArr[index]" alt="">
        <a href="javascript:void(0)" @click="prev" v-show="index != 0" class="left">上一张</a>
        <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right">下一张</a>
    </div>
    <script>
        // 列表数据用数组储存
        // v-bind 指令可以设置元素属性 比如src
        // v-show 和v-if 都可以切换元素的显示状态  频繁切换用v-show
       var vm = new Vue({
           el:"#app",
           data:{
             imgArr:[
                 "./images/1.png",
                 "./images/2.png",
                 "./images/3.png",
                 "./images/4.png",
                 "./images/5.png",
                 "./images/6.png",
                 "./images/7.png",
                 "./images/8.png",
                 "./images/9.png",
                 "./images/10.png",
                 "./images/11.png",

             ],
             index:0
           }, 
           methods: {
               prev:function(){
                this.index--;
               },
               next:function(){
                this.index++;
               }
           },
       });
    </script>
</body>
</html>